<div class="tab-pane tab-pane-global fade active show" id="id0">
    {% if error %}
      <p>{{ error }}</p>
    {% else %}
    <!-- <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> -->

<!-- Modal -->
<div class="modal fade" id="noDataModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">No Data</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
	      No data for this column(<span class="text-info nodata-pop-hl"> maximumutil>=90 || restartcounter>0 </span>).
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>

</div>

<table id="table--highmem" class="table" data-log-id="{{ log_id }}" >

</table>
<script>
var table = new Tabulator("#table--highmem", {
       // data:tabledata,
       tooltips:true,
       height:"100%",
       width: "90%",
       layout:"fitColumns",
       pagination:"local",
       paginationSize:40,
       paginationSizeSelector:[10, 20, 40],
       initialSort:[
        {column:"maximumutil", dir:"desc"}, 
       ],
       columns:[
	       {title:"Process", field:"processname", width:200, formatter:function(cell, formatterParams, onRendered){
		       return "<a class=\"analyze_ready\"><span class=\"text-info\"></span>&nbsp;"+cell.getValue()+"</a>"
	       }},
         {title:"MemoryFile", field:"memoryfile", width:250},
         {title:"HeapSize(MB)", field:"heapsize", width:150},
	       {title:"PeakUtilization", sorter:"number", field:"maximumutil",  formatter:"progress", formatterParams:{
		       color: function(value){
			         if (value>=90){
				     this.legend = "<span style=\"text-decoration: underline;\">"+value + "%</span>"
                                     return "red"
			         } else if (value>60){
				     this.legend = "<span  data-toggle=\"popover\"  data-content=\"No data for this column.\">"+value + "%</span>"
                                     return "orange"
			         } else {
				     this.legend = "<span data-container=\"body\"  data-content=\"No data for this column.\">"+value + "%</span>"
                                     return "green"
			         }
			       },
	       }, width:300, cellClick:function(e, cell){
		           memutil=cell.getRow().getData()['maximumutil']
		           rec=cell.getRow().getData()['restartcounter']
		           if (memutil >=90){
		               processname = cell.getRow().getData()['processname']
		               var url= "/fetch_memory_detail/" + processname+"/maximumdetail/{{log_id}}"
		               var tabId = "tab--" + processname+"-"+"maximumdetail";
		               header = "&nbsp;<span class=\"text-success tab-icon\"><i class=\"fas fa-percentage fa-1x\" aria-hidden=\"true\"></i></span>"+processname+"/maxutil";
		               createTab(tabId, header, url);
		           } else {
		    	       // $("#noDataModal").modal('show')
		           }
	       }},
	       {title:"RestartCounter", field:"restartcounter", formatter:function(cell, formatterParams, onRendered){ 
		       var thres = 0
		       var val = cell.getValue()
		       if (val > thres){
			       return "<a class=\"text-danger\" style=\"text-decoration: underline;\">" + val + "</a>"
		       }else{
			       return "<a class=\"text-info\">" + val + "</a>"
		       }
		       
		       }, width:150, cellClick:function(e, cell){
                           memutil=cell.getRow().getData()['maximumutil']
                           rec=cell.getRow().getData()['restartcounter']
                           if (memutil >=90 || rec>0){
                           processname = cell.getRow().getData()['processname']
                           var url= "/fetch_memory_detail/" + processname+"/restartdetail/{{log_id}}"
                           var tabId = "tab--" + processname+"-"+"restartdetail";
		           var header = "&nbsp;<span class=\"text-warning tab-icon\"><i class=\"fas fa-power-off fa-1x\" aria-hidden=\"true\"></i></span>"+processname+"/restart";
		           createTab(tabId, header, url);
		           } else {
		              // $("#noDataModal").modal('show')
		           }
		       } 
	       },
         {title:"Operation", formatter:function(cell){
		       return "<a class=\"analyze_ready\"><span class=\"text-info\"> <i class=\"fas fa-chart-line \"></i></span>&nbsp;</a>"
	 }, cellClick:function(e, cell){

		 memutil=cell.getRow().getData()['maximumutil']
		 rec=cell.getRow().getData()['restartcounter']
		 processname = cell.getRow().getData()['processname'];
		 url = "/fetch_process_table/"+ processname+"/{{log_id}}";
		 tabId = "tab--table-"+processname;
		 header = "&nbsp;<span class=\"text-info tab-icon\"><i class=\"fas fa-chart-bar\" aria-hidden=\"true\"></i></span>"+processname;
                 createTab(tabId, header, url);
	 }, },
       ],
});

$.get("/fetch_memory_json/{{ log_id }}", function(data, status){
	if (data["error"] == 0){
            tableData = data["data"];
            table.setData(tableData)
	}
})


</script>


    {% endif %}
</div>


